<template>
  <el-dialog title="查看流程" top="5vh" v-model="visible" :close-on-press-escape="false" :close-on-click-modal="false"
    @closed="clear">

    <div style="text-align: center; font-size: 12px;">图例 : &nbsp;
      <span style="color:#017501;"><i class="el-icon-circle-check"></i> 已完成</span>&nbsp;
      <span style="color:#FFA500;"><i class="el-icon-time"></i> 进行中</span>&nbsp;
      <span style="color:#666666;"><i class="el-icon-remove-outline"></i> 未执行</span>&nbsp;
    </div>

    <!-- 流程图 -->
    <div style="height: 35%;">
      <!-- <bpmn-viewer :xmlData="viewData.xmlData" :taskData="viewData.taskData" :flowData="viewData.flowData" /> -->
    </div>

    <!-- 数据不及格 -->
    <el-table border height="30%" :data="viewData.historices" :row-style="{ 'height': '20px', 'font-size': '12px' }"
      :header-cell-style="{ 'background-color': '#EEF1F6', 'font-size': '12px' }">
      <el-table-column type="index" label="#" fixed="left" align="center">
        <template #default="scope">
          {{ initIndex(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="任务名称" width="100" />
      <el-table-column label="处理结果" width="80" align="center">
        <template #default="scope">
          <template v-if="scope.row.agree">
            <el-tag size="small" :type="stateColor[scope.row.agree]">
              {{ $getDictLabel('FLOW_STATUS', scope.row.agree, '') }}
            </el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="assigneeName" label="处理人" width="100" />
      <el-table-column prop="auditTime" label="处理时间" width="150" align="center"
        :formatter="(row: Task) => $moment(row.auditTime, 'YYYY-MM-DD HH:mm')" />
      <el-table-column prop="duration" label="任务历时" width="100" align="center"
        :formatter="(row: Task) => $convertTimeUnit(row.duration)" />
      <el-table-column prop="opinion" label="处理意见" />
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { trace } from 'src/api/flow/activiti'
import useTable from 'src/hooks/useTable'
import { $moment, $convertTimeUnit, $getDictLabel } from 'src/hooks/useCommon'
import useFlow from '../hooks/useFlow'
import { type Task } from '../types'

const { initIndex } = useTable()
const { stateColor } = useFlow()

const viewData = reactive({
  xmlData: '',
  historices: [] as any,
  taskData: [],
  flowData: []
})

// 弹窗
const visible = ref<boolean>(false)
const open = (processInsId: string) => {
  searchImage(processInsId)
}
const close = () => {
  visible.value = false
}
const clear = () => {
  Object.assign(viewData, {
    xmlData: '',
    historices: [] as any,
    taskData: [],
    flowData: []
  })
}
defineExpose({
  open
})

function searchImage(processInsId: string) {
  trace(processInsId).then(({ data }) => {
    viewData.xmlData = data.editor || ''
    viewData.taskData = data.elements || []
    viewData.flowData = data.flows || []
    data.historicTasks.forEach((item: Task) => {
      const { id, name, startTime, auditTime, duration, vars } = item
      const historic = { id, name, startTime, auditTime, duration, ...vars }
      viewData.historices.push(historic)
    })
    visible.value = true
  })
}
</script>

<style lang="scss" scoped>
</style>
